import React, { useState, useEffect } from 'react'
import './Login.css'
import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons'
import { withRouter } from 'react-router-dom'
import cookie from 'react-cookies'
import { getlogin, getcaptchaImage } from '@/api/login.js'
import { setTokenTime } from '@/utils/auth.js'

function Login(props) {
  const [img, setimg] = useState('')

  // 页面加载
  useEffect(async () => {
    const res = await getcaptchaImage()
    // console.log(res);
    setimg(res)
  }, [])

  const onFinish = async values => {
    // console.log(values);
    const res = await getlogin({
      ...values,
      uuid: img.uuid,
    })
    const result = res
    // console.log(result.code);
    if (result.code === 200) {
      // console.log(123);
      cookie.save('usertoken', res.token)
      setTokenTime()
      props.history.push('/home')
      message.success(res.msg)
    } else {
      const res = await getcaptchaImage()
      setimg(res)
      message.error(result.msg)
    }
  }
  const setImgurl = async () => {
    const res = await getcaptchaImage()
    setimg(res)
  }
  return (
    <div style={{ background: '#2B303B', height: '100vh' }} className="login">
      <div className="login-box">
        <img
          src={require('@/static/img/login.png')}
          alt=""
          className="login-l-img"
        />
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ username: 'admin', password: '123456' }}
          onFinish={onFinish}
        >
          <div className="login-form-title">
            <img></img>
            <span className="title-label">汇客CRM系统</span>
          </div>
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              className="el-input__inner"
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              className="el-input__inner"
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, message: '请输入验证码!' }]}
          >
            <div className="code">
              <Input
                prefix={<SafetyOutlined className="site-form-item-icon " />}
                className="code-input"
                type="text"
                placeholder="验证码"
              />
              <div className="login-code" onClick={setImgurl}>
                <img
                  src={'data:image/gif;base64,' + img.img}
                  className=" login-code-img"
                ></img>
              </div>
            </div>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button login-btn"
            >
              登入
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default withRouter(Login)
